<template>
    <div class="content" :class="{ isnone: isnone }">
        <div class="div1">
            <h2>后台管理系统</h2>
            <span class="span1">0.0.1</span>
            <el-input v-model="input" style="width: 240px" placeholder="admin" :class="'elinput'" :prefix-icon="Moon" />
            <el-input v-model="mima" style="width: 240px" type="password" placeholder="······" show-password
                :class="'elinput'" :prefix-icon="Moon" />
            <button @click="denglurenzheng">登 录</button>
            <label>
                <el-checkbox v-model="savePassword">保存密码</el-checkbox>
            </label>
        </div>
    </div>

    <div :class="{ isnone: !isnone, divdiv: isnone }">
        <span>正在登录，请稍后......</span>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
const input = ref<string>(localStorage.getItem('username') || '');
const mima = ref<string>(localStorage.getItem('password') || '');
import { Moon } from '@element-plus/icons-vue';
import router from '@/router';
import { userdengru } from '../jiekoutest/demo3';
import { tokenuser } from '@/views/jiekoutest/domo4'

const isnone = ref(false)
const savePassword = ref(false);


const tiaozhuan = () => {
    return new Promise((resolve) => {
        const checkUserCode = async () => {
            let user = await tokenuser();
            if (user.code === '2000') {
                console.log('Condition met:', user);
                clearInterval(intervalId);
                resolve(true);
            } else {
                console.log('Condition not met, waiting...', user);
            }
        };

        const intervalId = setInterval(checkUserCode, 1000);
    });
};


const denglurenzheng = async () => {
    const res = await userdengru({ username: input.value, password: mima.value });

    if (res.code == '2000') {
        isnone.value = true
        localStorage.setItem('token', res.data);
        localStorage.setItem('username', input.value);
        localStorage.setItem('password', mima.value);

        const isReady = await tiaozhuan();
        if (isReady) {
            router.push({ path: '/studemo62/user' });
        }
    } else {
        alert('用户名或密码错误');
    }
};


</script>

<style lang="scss" scoped>
.content {

    display: flex;
    align-items: center;
    justify-content: center;
    height: 700px;

    .div1 {
        border: 1px solid blue;
        border-radius: 12px;
        padding: 20px 0;
        width: 350px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 5px 5px 5px aqua, -5px -5px 5px aqua;
        position: relative;

        .span1 {
            position: absolute;
            right: 20px;
            font-size: 12px;
            color: blue;
            border-radius: 3px;
            padding: 0 5px;
            background-color: aqua;
            border: 1px solid blue;
        }

        .elinput {
            margin: 10px 0;
        }

        button {
            padding: 10px 100px;
        }
    }
}

.isnone {
    display: none;
}

.divdiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 24px;
}
</style>